﻿<MRow>
    <MCol Cols="12" Sm="6" Class="py-2">
        <p>Exclusive</p>
        <MButtonGroup @bind-Value="_toggleExclusive">
            <MButton>
                <MIcon>mdi-format-align-left</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-center</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-right</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-justify</MIcon>
            </MButton>
        </MButtonGroup>
    </MCol>
    <MCol Cols="12" Sm="6" Class="py-2">
        <p>Multiple</p>
        <MButtonGroup @bind-Values="_toggleMultiple"
                      Dense
                      BackgroundColor="primary"
                      Dark
                      Multiple>
            <MButton>
                <MIcon>mdi-format-bold</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-italic</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-underline</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-color-fill</MIcon>
            </MButton>
        </MButtonGroup>
    </MCol>
    <MCol Cols="12" Sm="6" Class="py-2">
        <p>No Options Selected</p>
        <MButtonGroup @bind-Value="_toggleNone">
            <MButton>
                <MIcon>mdi-format-align-left</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-center</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-right</MIcon>
            </MButton>
            <MButton>
                <MIcon>mdi-format-align-justify</MIcon>
            </MButton>
        </MButtonGroup>
    </MCol>
    <MCol Cols="12" Sm="6" Class="py-2">
        <p>Mandatory</p>
        <MButtonGroup @bind-Value="_toggleOne"
                      Shaped
                      Mandatory>
            <MButton Value="@("left")">
                <MIcon>mdi-format-align-left</MIcon>
            </MButton>
            <MButton Value="@("center")">
                <MIcon>mdi-format-align-center</MIcon>
            </MButton>
            <MButton Value="@("right")">
                <MIcon>mdi-format-align-right</MIcon>
            </MButton>
            <MButton Value="@("justify")">
                <MIcon>mdi-format-align-justify</MIcon>
            </MButton>
        </MButtonGroup>
    </MCol>
    <MCol Cols="12" Class="py-2">
        <p>Text Options</p>
        <MButtonGroup @bind-Value="_text"
                      Tile
                      Color="deep-purple accent-3"
                      Group>
            <MButton Value="@("left")">
                Left
            </MButton>
            <MButton Value="@("center")">
                Center
            </MButton>
            <MButton Value="@("right")">
                Right
            </MButton>
            <MButton Value="@("justify")">
                Justify
            </MButton>
        </MButtonGroup>
    </MCol>
    <MCol Cols="12" Class="py-2">
        <p>Text &amp; Icon Options</p>
        <MButtonGroup @bind-Value="_icon"
                      Borderless>
            <MButton Value="@("left")">
                <span class="hidden-sm-and-down">Left</span>
                <MIcon Right>
                    mdi-format-align-left
                </MIcon>
            </MButton>
            <MButton Value="@("center")">
                <span class="hidden-sm-and-down">Center</span>
                <MIcon Right>
                    mdi-format-align-center
                </MIcon>
            </MButton>
            <MButton Value="@("right")">
                <span class="hidden-sm-and-down">Right</span>
                <MIcon Right>
                    mdi-format-align-right
                </MIcon>
            </MButton>
            <MButton Value="@("justify")">
                <span class="hidden-sm-and-down">Justify</span>
                <MIcon Right>
                    mdi-format-align-justify
                </MIcon>
            </MButton>
        </MButtonGroup>
    </MCol>
</MRow>

@code {
    StringNumber _text = "center";
    StringNumber _icon = "justify";
    StringNumber _toggleNone;
    StringNumber _toggleOne = "left";
    StringNumber _toggleExclusive = 2;
    List<StringNumber> _toggleMultiple = new() { 0, 1, 2 };
}
